<template>
	<view class="content">
		<stopModal />
		<cu-custom :noDiv="false">
		    <block slot="content" style="color: #FFFFFF;font-size: 20px;">布鲁可推荐大使</block>
		</cu-custom>
		<view class="top-container">
			<barrage ref="barrage" :scrollTop="scrollTop" @end="barageend"></barrage>
			<view class='top-bkg'>
				<img class="bkg-img" src="@/static/img/img_homepage_top_banner_01.jpg" alt="">
			</view>
			<view class="user-msg">
				<view class="flex-area">
					<view class="msg">
						<view v-if="!authflag.getPhoneNumber">
							<wxAuthPhone :authType="authType" class="msg">
								<view class="msg">
									<img class="avatar" src="@/static/index/img_64_to_log_in@2x.png" alt="">
									<view class="desc">点击登录</view>
								</view>
							</wxAuthPhone>
							
						</view>
						<view v-else-if="!authflag.getUserInfo">
							<wxAuthAvatar :authType="authType" class="msg">
								<view class="msg">
									<!-- <view class="avatar">
										<open-data type="userAvatarUrl"></open-data>
									</view> -->
									<img class="avatar" src="@/static/index/img_64_to_log_in@2x.png" alt="">
									<view class="desc">点击授权头像昵称</view>
								</view>
							</wxAuthAvatar>
						</view>
						<view v-else>
							<view class="msg">
								<view class="avatar">
									<open-data type="userAvatarUrl"></open-data>
								</view>
								<view class="desc">
									推荐积分
									<view class="num">{{taskUserInfo.point || userTaskMsg.point ||  0}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="rules">
						<view class="rules" @click="jumpRule">
							<img src="@/static/icon/icon_16_list_w@2x.png" alt="">
							活动规则
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-list">
			<view class="title-area">
				<img class="title-img" src="@/static/index/img_title_task@2x.png" alt="">
			</view>
			<view class="items">
				<!-- <view class="item-top"/>
				<view class="item">
					<view class="item-icon">
						<img src="@/static/index/img_64_task_thumb_01@2x.png" alt="">
					</view>
					<view class="item-desc">
						<view class="desc-title">绑定抖音号</view>
						<view class="desc">绑定您的抖音帐号，开启抖音推广任务</view>
					</view>
					<view class="item-btn binded" v-if="authflag.bindDouyin">
						<view class="btn">
							已经绑定抖音号
						</view>
						<view class="counts">{{taskUserInfo.douyin_id}}</view>
					</view>
					<view class="item-btn" v-else>
						<wxAuthPhone btnPath="'bindDouyin'">
							<view class="btn" @click="doTask({
								renwu_canyu_tiaojian_map: {
									douyin_bind: '1',
									sku_actived:'1'
								},
							})">
								立即绑定
							</view>
						</wxAuthPhone>
						<view class="counts">+100推广积分</view>
					</view>
				</view> -->
				
				<!-- 任务的循环展示 -->
				<view class="comments_reply" v-for="(item, index) in dataList" :key="index">
					<view v-if="item.tuiguang_leixing == 'bind_douyinhao'">
						<view class="item-top"/>
						<view class="item douyin">
							<view class="item-icon">
								<img src="@/static/index/img_64_task_thumb_01@2x.png" alt="">
							</view>
							<view class="item-desc">
								<view class="desc-title">{{item.title}}</view>
								<view class="desc">{{item.sub_title}}</view>
							</view>
							<view class="item-btn binded" v-if="authflag.bindDouyin">
								<view class="btn">
									已经绑定抖音号
								</view>
								<view class="counts">{{taskUserInfo.douyin_id}}</view>
							</view>
							<view class="item-btn" v-else>
								<wxAuthPhone btnPath="'bindDouyin'">
									<!-- <view class="btn" @click="doTask({
										renwu_canyu_tiaojian_map: {
											douyin_bind: '1',
											sku_actived:'1'
										},
									})">
										立即绑定
									</view> -->
									<view class="btn" @click="doTask(item)">
										立即绑定
									</view>
								</wxAuthPhone>
								<view class="counts">+{{item.point}}推荐积分</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="item-top"/>
						<view class="item"  :class="{unfinish : item.show_status== 1 , unclaimed: item.show_status ==  2 , finish: item.show_status ==  3 } ">
							<view class="item-icon">
								<img v-if="item.show_status == 2 || item.show_status == 3 || item.show_status ==  1" src="@/static/index/img_64_task_thumb_02@2x.png" alt="">
								<img v-else-if="item.show_status == 0 || item.show_status == 4" src="@/static/index/img_64_task_thumb_03@2x.png" alt="">
							</view>
							<view class="item-desc" @click="showTaskDesc(item)">
								<view class="desc-title">{{item.title}}</view>
								<view class="desc">{{item.sub_title}}</view>
							</view>
							<view class="item-btn">
								<view v-if="item.show_status ==  0">
									<wxAuthPhone>
										<view class="btn" @click="doTask(item)">
											去做任务
										</view>
									</wxAuthPhone>
								</view>
								<view v-if="item.show_status ==  4">
									<view class="btn" @click="doTask(item)">
										审核未通过
									</view>
								</view>
								<view v-if="item.show_status ==  1">
									<view class="btn checking" @click="doTask(item)">
										审核中
									</view>
								</view>
								
								<view class="btn" v-if="item.show_status ==  2" @click="receive(item)">
									领取奖励
								</view>
								<view class="btn finish" v-if="item.show_status ==  3">
									已领取
								</view>
								<view class="counts">+{{item.point}}推荐积分</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="modeFlag">
				<view v-if="modeType=='bind_douyin' && !authflag.bindDouyin">
					<bindDouyin :checkItem="checkItem"/>
				</view>
				<view v-else-if="modeType=='receive_modal'">
					<receiveModal :count="checkItemCount" />
				</view>
				<view v-else-if="modeType=='no_douyin_modal'">
					<noDouyinModal />
				</view>
				<view v-else-if="modeType=='no_shop_modal' && !authflag.hasShop">
					<noShopModal />
				</view>
				<view v-else-if="modeType=='task_desc'">
					<taskDescModal :checkItem="checkItem"/>
				</view>
				<view v-else-if="modeType=='video_link_modal'">
					<videoLinkModal :checkItem="checkItem" :videoStatus="checkItemVideoStatus" :videolink="checkItemVideoLink"/>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import stopModal from "@/components/modal/stop_modal.vue";
	import bindDouyin from "@/components/modal/bind_douyin.vue";
	import receiveModal from "@/components/modal/receivw_modal.vue";
	import noDouyinModal from "@/components/modal/no_douyin_modal.vue";
	import noShopModal from "@/components/modal/no_shop_modal.vue";
	import taskDescModal from "@/components/modal/task_desc_modal.vue";
	import videoLinkModal from "@/components/modal/video_link_modal.vue";
	import Barrage from '@/components/barrage.vue'
	export default {
		components: {
			stopModal,
			bindDouyin,
			receiveModal,
			noDouyinModal,
			noShopModal,
			taskDescModal,
			videoLinkModal,
			Barrage
		},
		computed:{
			...mapState(['authflag', 'userinfo','taskUserInfo'])
		},
		data() {
			// ShowStatus            int               `json:"show_status"` // 用户展示状态0 未完成 1 审核中 2 已完成未领取， 3已领取 4 审核失败
			return {
				authType:['getUserInfo', 'getPhoneNumber'],
				title: 'Hello',
				userTaskMsg: {},
				modeFlag: false,
				modeType: null,
				// modeType: 'no_douyin_modal',
				checkItemCount: 0,
				checkItemVideoStatus: 0,
				checkItemVideoLink: '',
				checkItem: null,
				dataList: [
					// {
					// 	description: "日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务日常任务",
					// 	id: 1,
					// 	point: 200,
					// 	record_id: 0,
					// 	renwu_canyu_tiaojian: "sku_actived:1,douyin_bind:1",
					// 	renwu_canyu_tiaojian_map: {douyin_bind: "1", sku_actived: "1"},
					// 	renwu_xingshi: "",
					// 	show_status: 4,
					// 	sort: 0,
					// 	status: 1,
					// 	sub_title: "",
					// 	task_content: "审核中",
					// 	task_type: "daily",
					// 	title: "日常任务日常任务日常任务日常任务日常任务日常任务",
					// 	tuiguang_leixing: "douyin",
					// 	wancheng_tiaojian: "",
					// 	wancheng_tiaojian_map: {},
					// }
				]
			}
		},
		onPageScroll(res){
			this.scrollTop = res.scrollTop
		},
		async onLoad(option) {
			//等待登录成功	
			await this.$onLaunched;
			console.log('页面逻辑开始了')
			// 后续业务逻辑
			this.getList()
			this.getUserInfo()
			uni.$on("phone_confirm", () => {
				this.modeFlag = true
				this.modeType = 'bind_douyin'
			});
			uni.$on("refresh_list", () => {
				this.getList('refresh')
				this.getUserInfo()
			});
			
			uni.$on("pop_close", () => {
				this.getUserInfo()
				this.getList()
				
				this.modeFlag = false
			});
			
			this.barragestart() // 开始弹幕
		},
		onShow(){
			this.getList()
			this.getUserInfo()
		},
		methods: {
			barragestart(){
				this.$api.getNewsLoop().then(res => {
					this.$refs.barrage.start(res);
				})
				
			},
			barageend(){
				
				this.barragestart()
			},
			jumpRule(){
				console.log('cdsacsdacasd')
				uni.navigateTo({
				    url: '/pages/rules/rules'
				});
				// uni.showModal({
				//     title: '提示',
				// 	showCancel: false,
				//     content: '跳转到规则页面，内容还没给',
				//     success: function (res) {
				//         if (res.confirm) {
				//             console.log('用户点击确定');
				//         } else if (res.cancel) {
				//             console.log('用户点击取消');
				//         }
				//     }
				// });
			},
			showTaskDesc(item){
				this.modeFlag = true
				this.checkItem = item
				this.modeType = 'task_desc'
			}, 
			getUserInfo () {
				this.$api.getTaskUserInfo().then(res => {
					this.userTaskMsg =  res
					this.$store.dispatch("set_task_userinfo", {
						douyin_id: res.douyin_id,
						point: res.point
					})
					if(res.is_sku_actived == 1) {
						this.$store.dispatch("set_authflag", {
							hasShop: true 
						})
					}else {
						this.$store.dispatch("set_authflag", {
							hasShop: false 
						})
					}
				})
			}, 
			getList(type){
				if(this.authflag.getPhoneNumber){
					this.$api.getTaskListAuth().then(res => {
						if(res){
							this.dataList = res
						}
					})
				}else {
					this.$api.getTaskListNoAuth().then(res => {
						if(res){
							this.dataList = res
						}
					})
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 3000)
			},
			receive(item){
				if(item && item.point){
					this.checkItemCount = item.point
					this.$api.getTaskPonit({
						record_id: item.record_id
					}).then(res => {
						this.modeFlag = true
						this.modeType = 'receive_modal'
					})
				}
			},
			doTask(item){
				let douyin_bind 
				let sku_actived 
				if(item && item.tuiguang_leixing == 'bind_douyinhao'){
					douyin_bind = '1'
				}else if(item ){
					douyin_bind = item.renwu_canyu_tiaojian_map.douyin_bind
					sku_actived = item.renwu_canyu_tiaojian_map.sku_actived
				}
				if(!this.authflag.bindDouyin && douyin_bind == '1'){
					this.modeFlag = true
					this.checkItem = item
					if(item.tuiguang_leixing == 'bind_douyinhao'){
						this.modeType = 'bind_douyin'
					}else{
						this.modeType = 'no_douyin_modal'
					}
				}else if(!this.authflag.hasShop && sku_actived == '1'){
					this.modeFlag = true
					this.modeType = 'no_shop_modal'
				}else{
					if(item){
						this.checkItem = item
					}
					if(item && item.show_status){
						this.checkItemVideoStatus = item.show_status
						this.checkItemVideoLink = item.task_content
					}
					this.modeFlag = true
					this.modeType = 'video_link_modal'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		max-width: 100vw;
		overflow: hidden;
	}
	.content{
		background-color: #D0021B;
		width: 100vw;
		overflow: hidden;
		min-height: 100vh;
		
		.top-container{
			position: relative;
			.top-bkg{
				margin-top: -120rpx;
				height: 838rpx;
				.bkg-img{
					width: 100%;
					height: 100%;
				}
			}
			.user-msg{
				position: relative;
				top: -700rpx;
				z-index: 999;
				// position: relative;
				// top: 14.8vh;
				// top: - 200rpx;
				.flex-area{
					display: flex;
					width: 100vw;
					padding: 0 4.2vw;
					align-content: space-between; 
					align-items: center;
					.msg{
						flex: 1;
						display: flex;
						align-items: center;
						.avatar{
							border:2.5px solid #FFFFFF;
							width: 48px;
							height: 48px;
							border-radius: 50%;
							overflow: hidden;
						}
						.desc{
							padding-left: 4.2vw;
							font-size: 3.2vw;
							color: #FFBFC6;
							.num{
								font-size: 5.3vw;
								color: #FFFFFF;
							}
							
						}
					}
					.rules{
						width: 48px;
						text-align: center;
						img{
							width: 16px;
							height: 16px;
							display: block;
							margin: 0 auto 2px;
						}
						font-size: 12px;
						color: #FFBFC6;
					}
				}
				
			}
		}
		.order-list{
			// width: 375px;
			min-height: 417px;
			background: #FFFFFF;
			border-radius: 20px 20px 0 0 ;
			margin-top: -60rpx;
			.title-area{
				.title-img{
					width: 100%;
					height: 19vw;
					margin-top: -6.7vw;
				}
			}
			.items{
				width: 91.5vw;
				margin: 4px auto 0;
				text-align: center;
				padding-bottom: 20px;
				.item-top{
					width: 100%;
					height: 12px;
				}
				.item{
					width: 91.5vw;
					// height: 12vh;
					// background-image: url('@/static/index/img_cell_task_top@2x.png');
					// background-size: 91.5vw 12vh;
					height: auto;
					display: flex;
					align-items: top;
					border-radius: 10rpx;
					background: #FDF9E9;
					padding: 24rpx 0;
					// &.douyin{
					// 	background-image: url('@/static/index/img_cell_task_top@2x.png');
					// 	background-size: 91.5vw 12vh;
					// 	.item-btn{
					// 		.btn{
					// 			height: 3vh;
					// 			line-height: 3vh;
					// 		}
					// 	}
					// }
					
					.item-icon{
						width: 12.8vw;
						img{
							margin-top: 24rpx;
							width: 8.5vw;
							height: 8.5vw;
						}
					}
					.item-desc{
						flex: 1;
						text-align: left;
						.desc-title{
							min-height: 3vh;
							line-height: 3vh;
							font-size: 3.7vw;
							width: 300rpx;
							color: #333333;
							// white-space:nowrap;
							// overflow:hidden;
							// text-overflow:ellipsis;
							font-weight: 500;
						}
						.desc{
							font-size: 3.2vw;
							color: #E67E89;
							line-height: 4.2vw;
							min-height: 8.4vw;
							margin-top: 4px;
							// overflow:hidden;
							// text-overflow:ellipsis;
							// display:-webkit-box;
							// -webkit-box-orient:vertical;
							// -webkit-line-clamp:2;
						}
					}
					.item-btn{
						width: 28.8vw;
						text-align: center;
						font-size: 0;
						.btn{
							width: 28.8vw;
							height: 7.8vh;
							line-height: 7.8vh;
							margin: 0 auto;
							background-image: url('@/static/btn/btn_28_red_108_shadow_nor@2x.png');
							background-size: 28.8vw 7.8vh;
							background-repeat: no-repeat;
							background-position: center center;
							font-size: 14px;
							color: #FFFFFF;
							// color: #805340;
							text-align: center;
							font-weight: 500;
							&.checking{
								background-image: url('@/static/btn/btn_28_gery_108@2x.png');
								background-size: 28.8vw 7.8vh;
							}
						}
						.counts{
							font-size: 12px;
							color: #F82045;
							text-align: center;
							margin-top: -4px;
						}
						&.binded{
							.btn{
								background-image: url('@/static/icon/icon_12_link_pink@2x.png');
								background-repeat: no-repeat;
								background-size: 12px 12px;
								background-position: left center;
								width: 72px;
								font-size: 12px;
								color: #E67E89;
								width: 108px;
								padding-left: 6px;
							}
						}
					}
					&.unfinish, &.unclaimed{
						background-image: none;
						background: #FDF9E9;
						.desc{
							color: #CC915C;
						}
					}
					&.unclaimed{
						.item-btn{
							.btn{
								color: #805340;
								background-image: url('@/static/btn/btn_28_yellow_108_shadow_nor@2x.png');
							}
						}
					}
					&.finish{
						background-image: none;
						background: #F5F5F5;
						.item-desc{
							.desc-title, .desc{
								color: #999999;
							}
						}
						.item-btn{
							.btn{
								background-image: url('@/static/btn/btn_28_gery_108@2x.png');
							}
						}
					}
					&.douyin{
						
						background-image: url('@/static/index/img_cell_task_top@2x.png');
						background-size: 91.5vw 100%;
						.item-icon{
							img{
								margin-top: 10rpx;
							}
						}
						.item-btn{
							&.binded{
								.btn{
									height: 3vh;
									line-height: 3vh;
								}
								.counts{
									margin-top: 0.4vh;
								}
							}
						}
					}
				}
				
			}
		}
	}
</style>
